<template>
	<view class="main">
		<u-navbar :title="$t('system.navtitle')" :autoBack="true" bgColor="#292929" leftIconColor="#FFFFFF"
			:titleStyle="{color:'#FFFFFF',fontSize:'40rpx'}" rightIcon="chat" />
			<view class="top-msg">
				<image :src="userInfo.avatar?userInfo.avatar:'../../static/morentouxiang.png'" mode="scaleToFill"
					class="u-avatar" @click="toChooseavatar"/>
				<text class="name">{{userInfo.name}}</text>
				<text class="id-name">ID {{userInfo.id}}</text>
				<view class="close-pass" v-if="userInfo.realState">
					<u-icon name="checkbox-mark" :bold="true" color="#48FF9C" size="20"></u-icon>
					<text>{{$t('system.tips')}}</text>
				</view>
				<view class="close-pass" @click="toNavigate('authentication/authentication')" v-else>
					<u-icon name="close" :bold="true" color="#000000" size="12"></u-icon>
					<text>{{$t('system.tips1')}}</text>
				</view>
			</view>
		<view class="list-box">
			<view class="list-item" v-for="(item,key,index) in setList" :key="index" @click="tolist(item,key)">
				<u-icon :name="item.icon" color="#fff" size="24"></u-icon>
				<p class="list-text"><text class="text-content">{{item.name}}</text><u-icon name="arrow-right"
						color="#fff" size="16"></u-icon></p>
			</view>
		</view>
		<button class="bth-bottom" @click="outLogin">{{$t('system.logout')}}</button>
		<u-popup :show="showLanguage" @close="showLanguage=false" mode="bottom" :round="10">
			<view class="locale-box">
				<view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
					<text class="text">{{item.text}}</text>
					<text class="icon-check" v-if="item.code == $i18n.locale"></text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show" @close="show=false" round="65" mode="center">
		   <view class="popbox">
		        <text class="pop-title">{{title}}</text>
				<rich-text class="pop-main" :nodes="ruleHtml" />
			   <button class="popbth" @click="show=false">{{$t('gaming.rule2')}}</button>
		   </view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isReady: false,
				userInfo: {},
				systemLocale: '',
				applicationLocale: '',
				showLanguage: false,
                show:false,
				ruleHtml:"",
				title:""
			};
		},
		computed: {
			locales() {
				return [{
						text: this.$t('locale.en'),
						code: 'en',
						type:"en_US",
					},
					{
						text: this.$t('locale.zh'),
						code: 'zh-Hans',
						type:"zh_CN",
					},
					{
						text: this.$t('locale.zt'),
						code: 'zh-Hant',
						type:"zh_CN",
					}
				]
			},
			setList() {
				return {
					'password': {
						name: this.$t('system.list1'),
						info:"",
						icon: "lock" 
					},
					'agreement': {
						name: this.$t('system.list2'),
						info:"user_agreement",
						icon: "account"
					},
					'services': {
						name: this.$t('system.list3'),
						info:"privacy_agreement",
						icon: "star"
					},
					'authentication': {
						name: this.$t('gaming.Authentication'),
						info:"",
						icon: "coupon"
					}
				}
			}
		},
		onShow() {
			this.getUser()
		},
		methods: {
			toChooseavatar(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success:(res)=> {
						this.userInfo.avatar = res.tempFilePaths[0]
					}
				});
			},
			async getUser() {
				const {
					data: res
				} = await this.$api('/front/getInfo', 'GET')
				// console.log(res)
				this.userInfo = res.data
			},
			async outLogin() {
				const {
					data: res
				} = await this.$api('/front/logout', 'POST')
				// console.log(res)
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			toNavigate(url) {
				uni.navigateTo({
					url: '/pages/' + url
				})
			},
			tolist(item,key) {
				if (key == 'password') {
					uni.navigateTo({
						url: '/pages/sendout/sendout?email='+this.userInfo.email
					})
				} else if (key == 'authentication') {
					// uni.navigateTo({
					// 	url:'/pages/authentication/authentication'
					// })
					if(!this.isReady){
						return uni.$u.toast(this.$t('gaming.Authentication1'))
					}else{
						uni.navigateTo({
							url:'/pages/authentication/authentication'
						})
					}
					
				} else if(key == 'agreement'){
					 this.showText(item)
				}else if(key == 'services'){
					this.showText(item)
				}
			},
			async showText(item){
				const {data:res} = await await this.$api('/front/getDocument', 'GET',{code:item.info})
				this.ruleHtml = res.data
				this.title = item.name
				this.show=true
				// console.log(res)
			},
			//切换语言
			onLocaleChange(e) {
				uni.setLocale(e.code);
				this.$i18n.locale = e.code;
				uni.setStorageSync("languageInfo",JSON.stringify(e))
				this.showLanguage = false
			}

		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uicon-chat {
		color: #A58EFA !important;
		font-size: 60rpx !important;
	}
.popbox {
		width: 617rpx;
		height: 80vh;
		background-color:#21224C;
		color: #fff;
		border-radius: 53rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding:70rpx 32rpx;
		font-family: my-font;
	    .pop-title{
			font-size: 62rpx;
		}
		.pop-main{
			height: 60vh;
			overflow-y: auto;
			word-wrap: break-word; /* 允许在长单词内部换行 */
			word-break: break-all; /* 允许在任意位置换行 */
		}
		.popbth {
			width: 207rpx;
			height: 76rpx;
			border-radius: 30rpx;
			background-color: #fff;
			color: #000;
			line-height: 76rpx;
			font-size: 40rpx;
			margin-top: 40rpx;
		}
	}
	.main {
		width: 100vw;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		color: #fff;
		font-family: my-font;
		padding-bottom: 20rpx;
		padding-top: 120rpx;
		box-sizing: border-box;
		background-color: #000;
		.top-msg{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.u-avatar {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-bottom: 36rpx;
			}
			
			.name {
				font-size: 40rpx;
			}
			
			.id-name {
				font-size: 30rpx;
			}
			
			.close-pass {
				height: 43rpx;
				line-height: 43rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #414141;
				border-radius: 23rpx;
				font-size: 30rpx;
				gap: 12rpx;
				padding: 0 15rpx;
				margin: 20rpx 0;
			}
			
		}
		
		.list-box {
			width: 660rpx;
			border-radius: 40rpx;
			background: linear-gradient(180deg, #312843 0%, #4D4053 100%);
			box-sizing: border-box;
			padding: 60rpx 20rpx;
			font-size: 26rpx;
            margin-top: 40rpx;
			.list-item {
				width: 100%;
				display: flex;
				align-items: flex-start;
				gap: 20rpx;
				margin-bottom: 40rpx;

				.list-text {
					flex: 1;
					border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
					display: flex;
					align-items: center;
					padding-bottom: 40rpx;
					line-height: 40rpx;
					box-sizing: border-box;

					.text-content {
						flex: 1;
						font-size: 30rpx;
					}
				}
			}

			.list-item:last-child {
				margin-bottom: 0rpx;

				.list-text {
					border-bottom: none;
					padding-bottom: 0rpx;

				}
			}
		}

		.bth-bottom {
			width: 382rpx;
			height: 101rpx;
			line-height: 101rpx;
			border-radius: 30rpx;
			background-color: #2D3139;
			font-size: 30rpx;
			color: #fff;
			margin-top: 110rpx;
		}
	}

	.locale-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: linear-gradient(180deg, #312843 0%, #4D4053 100%);
		padding: 20rpx 0;
		min-height: 300rpx;
		gap: 10rpx;

		.locale-item {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			width: 100vw;
			color: #fff;
			padding: 10px 0;
			overflow: hidden;

			.text {
				display: inline-block;
				border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
				padding: 10rpx 0;
			}

			.icon-check {
				margin-right: 5px;
				border: 2px solid #007aff;
				border-left: 0;
				border-top: 0;
				height: 12px;
				width: 6px;
				transform-origin: center;
				/* #ifndef APP-NVUE */
				transition: all 0.3s;
				/* #endif */
				transform: rotate(45deg);
			}
		}
	}
</style>